<template>
    <div class="subpage">
        <my-head title="注册" :back="false">
            <van-icon name="revoke" class="hicon"  @click="gotoback" />
        </my-head>
        <van-form @submit="onSubmit" ref="form" @failed="onFailed" >
            <van-field
                v-model="form.username"
                name="username"
                label="用户名称"
                placeholder="请输入用户名称"
                clearable
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="form.phone"
                name="phone"
                label="手机号码"
                placeholder="请输入手机号码"
                clearable
                :rules="[
                    { required: true, message: '请填写手机号' },
                     {
                        pattern:reg.phone,
                        message:'请输入正确的手机号'
                    }
                  
                ]"
            />
             <van-field
                v-model="form.email"
                name="email"
                label="邮箱"
                placeholder="请输入邮箱"
                clearable
                :rules="[
                    { required: true, message: '请填写邮箱' },
                     {
                        validator:checkEmail,message:'请输入正确的邮箱'
                    }
                   
                ]"
            />
            <van-field
                v-model="form.password"
                name="password"
                label="登录密码"
                placeholder="请输入登录密码"
                :type="type"
                :right-icon="type=='password'?'closed-eye':'eye-o'"
                @click-right-icon="changeType"
                clearable
            
                :rules="[
                    { required: true, message: '请填写密码' },
                      {
                        pattern:reg.pwd,message:'请输入6-16的数字字母组合'
                    }
                   
                ]"
            />
            <van-field
                v-model="form.dbpassword"
                name="dbpassword"
                label="确认密码"
                placeholder="请输入确认密码"
                :type="type1"
                :right-icon="type1=='password'?'closed-eye':'eye-o'"
               @click-right-icon="changeType1"
                clearable
                :rules="[
                    { required: true, message: '请填写密码' },
                      {
                        pattern:reg.pwd,message:'请输入6-16的数字字母组合'
                    },
                    {
                        validator:checkPass,message:'两次密码不一致'
                    }
                  
                ]"
            />
            <div class="links" >
                <p class="left">
                    <router-link to="/login">有账号,去登录?</router-link>
                </p>
                <p class="right">
                    <router-link to="/forgetpass">找回密码?</router-link>
                </p>
            </div>
            <div style="margin: 16px;">
                <van-button  block type="primary" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>


<script>
export default {
    data(){
        return{
            form:{
            },
         
            type:'password',
            type1:'password',
                          
        }
    },
    methods:{
         checkDbPassword(){
            console.log(this.$refs.form)
            // validate: ƒ ()
            // validateField: ƒ ()
            // validateFields: ƒ ()
            // validateFirst: (...)
            if(this.reg.pwd.test(this.form.password)){
                // 调用 dbpassword rules 
                // console.log(this.$refs.form)
                this.$refs.form.validateField('dbpassword')
            }
        },
        checkPass(val){
            if(this.reg.pwd.test(this.form.password)){
                return val == this.form.password;
            }
        },
        checkEmail(val){
            return this.reg.email.test(val)
        },
        onFailed(){
            this.$notify({
                message: '数据校验失败,请重试',
                color: '#ad0000',
                background: '#ffe1e1',
            });
        },
         onSubmit(value){
            console.log(value)
            // 注册
            // this.$axios.post('/user',value)
            // .then(res=>{

            // })

            // 先要判断是否存在用户
            // 用户名和手机号
            // 有 不能插入
            // 没有 就直接插入
            this.$ajax.findUser({
                username:value.username,
                phone:value.phone
            })
            .then(res=>{
                if(res.length>0){
                    this.$toast('用户已经存在,请重新注册')
                }else{
                    // 插入数据
                    this.$ajax.register(value)
                    .then(res=>{
                        // 注册成功 
                        this.$toast.success('注册成功')
                        this.$router.push({
                            name:'login',
                            query:value 
                        })
                    })
                }
            })
        },

       changeType(){
            this.type = this.type =='password' ?'text':'password'
        }, 
        changeType1(){
            this.type1 = this.type1 =='password' ?'text':'password'
        }, 
       
          
    },
      mounted(){
        // this.$axios.get("/test")
        // .then(res=>{

        // })
        this.$ajax.test({ID:2114})
        .then(res=>{

        })
    }

}
</script>
